<template>
  <div class="video">
    <!-- 开屏广告 -->
    <div class="ad" :style="{display: showAd ? 'block': 'none'}">
      <p class="adTime" @click="closeAd">点击跳转<span>{{countdown}}</span></p>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591073286908&di=2b930a17aefa69f08e44968f037dd1da&imgtype=0&src=http%3A%2F%2Fpic2.cxtuku.com%2F00%2F00%2F64%2Fb69373b0d3ed.jpg" alt="">
    </div>

    <NavBar />

    <div class="content">
      <!-- 标签页 -->
      <van-tabs v-model="active" swipeable animated sticky :offset-top="44">
        <van-tab
          v-for="(item, index) in cateList"
          :title="item.title"
          :key="index"
        >
          <van-list
            :immediate-check="false"
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <VideoList :cateList="cateList"></VideoList>
          </van-list>
        </van-tab>
      </van-tabs>
      <div class="icon" @click="$router.push('/video/setting')">
        <i class="fa fa-cog"></i>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/navbar/VideoNavbar";
import VideoList from "./child/VideoList";
import { reqCategory, reqCateDetail } from "../../api/video";
export default {
  name: "videoPage",
  data() {
    return {
      active: null,
      cateList: [],
      // 显示开屏广告
      showAd: true,
      // 广告倒计时
      countdown: 5
    };
  },
  created() {
    this.getCategory();
  },
  activated() {
    if(localStorage.getItem("nowCates")){
      let arr = JSON.parse(localStorage.getItem("nowCates"))
      this.changeCate(arr);
      this.getCateDetail()
    }
  },
  methods: {
    // 获取 tabs 栏的数据
    async getCategory() {
      if(localStorage.getItem("nowCates")){
        return
      }
      const result = await reqCategory();
      this.changeCate(result);
    },
    // 由于 tabs 栏 缺少 list 数据，所有需要手动给每个分类添加
    changeCate(data) {
      const cates = data.map(item => {
        item.list = [];
        item.page = 0;
        item.pagesize = 10;
        item.loading = false;
        item.finished = false;
        return item;
      });
      this.cateList = data;
      this.getCateDetail();
    },

    // 获取文章数据需要 tabs 栏的分类id
    handelCategoryObj() {
      if (categoryObj) {
        categoryObj.list = [];
      }
      const categoryObj = this.cateList[this.active];
      return categoryObj;
    },

    // 获取分类的详细信息
    async getCateDetail() {
      const cateObj = this.handelCategoryObj();
      if (cateObj) {
        const result = await reqCateDetail(
          cateObj._id,
          cateObj.page,
          cateObj.pagesize
        );
        // cateObj.list = result
        cateObj.list.push(...result);
        cateObj.loading = false;

        // 判断是否还有数据
        if (result.length < cateObj.pagesize) {
          cateObj.finished = true;
        }
      }
    },

    // 下拉加载
    onLoad() {
      // 获取到当前选项
      const selectItem = this.handelCategoryObj();
      selectItem.page++;
      this.getCateDetail();
    },

    // 关闭开屏广告
    closeAd(){
      this.showAd = false
      this.countdown = 0
      clearInterval(this.timer)
    },

    adCountTime(){
      this.timer = setInterval(()=>{
        this.countdown --
        if(this.countdown <= 0){
          this.showAd = false
          clearInterval(this.timer)
        }
      }, 1000)
    }
  },
  mounted() {
    this.adCountTime()
  },
  watch: {
    active() {
      this.getCateDetail();
    }
  },
  components: {
    NavBar,
    VideoList
  }
};
</script>
<style scoped lang="less">
@import url("../../assets/css/base.less");
.video {
  padding-bottom: 50px;
  .ad{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    color: #048fc7;
    img{
      width: 100%;
      height: 100%;
    }
    .adTime{
      position: absolute;
      right: 10px;
      top: 10px;
      padding: 10px;
      span{
        margin: 0 10px;
      }
    }
  }
  .content {
    margin-top: 44px;
    position: relative;

    /deep/.van-sticky {
      width: 88%;
    }

    .icon {
      background-color: #fff;
      width: 12%;
      position: fixed;
      top: 44px;
      right: 0;
      height: 44px;
      font-size: 16px;
      line-height: 44px;
      text-align: center;
      color: #7f8080;
    }
  }
}
</style>
